<template>
  <view class="doingsDetail_pot">
    <view class="person_info">
      <view class="user_container">
        <view class="title">{{detailData.activityName}}</view>
        <view class="person_container">
          <view class="image_box">
<!--          <img :src="detailData.userAvatar"/>-->
          <img src="https://ldyw.eos-huhehaote-1.cmecloud.cn/img/1.png"/>
        </view>
          <view class="info_box">
          <view class="name_box">
            <span>{{ detailData.publisher }}</span>
            <!--          <view class="integral_box">-->
            <!--            <span>活动积分+{{detailData.activityTypeScore}}</span>-->
            <!--          </view>-->
          </view>
          <view class="address_box">
            <span>{{detailData.activityAddress}}</span>
          </view>
        </view>
        </view>
      </view>
      <view class="qr_code_image_container">
        <img :src="qerCodeImage"/>
      </view>
    </view>

    <view class="grey_line">
    </view>
    <DoingsCard :cardData="detailData"></DoingsCard>
  </view>
</template>

<script>
import DoingsCard from "./doingsCard"

export default {
  name: "index",
  components: {
    DoingsCard
  },
  props: ['detailData'],
  data() {
    return {
      qerCodeImage: 'https://api.qrserver.com/v1/create-qr-code/?data=http://pan.vc14.com/?representativeId'
    }
  },
}
</script>

<style scoped lang="scss">
.doingsDetail_pot {
  width: 100%;
  box-sizing: border-box;
  padding:20px;
  overflow: auto;

  .person_info {
    width: 100%;
    //background-color: #BBFFAA;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .user_container {
      display: block;

      .title {
      }
      .person_container{
        display:flex;
        justify-content: start;
        align-items: center;
        padding-top:30rpx;
        padding-bottom: 20rpx;


      .image_box {
        width: 94rpx;
        height: 94rpx;
        background-size: cover;
        background-position: center;
        border-radius: 50%;
        margin-right: 20rpx;

        img {
          width: 100%;
          height: 100%;
        }
       }
      }

      .info_box {
        height: 94rpx;
        //background-color: yellowgreen;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: start;

        .name_box {
          width: 100%;
          font-size: 30rpx;
          font-weight: 600;
          color: #434141;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .integral_box {
            width: 160rpx;
            height: 52rpx;
            border-radius: 28rpx;
            background-color: #FF946D;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #AD2325;
            font-size: 22rpx;

          }
        }

        .address_box {
          font-size: 30rpx;
          color: #707070;
        }
      }
    }


    .qr_code_image_container {
      width: 100rpx;
      height: 100rpx;

      img {
        width: 100%;
        height: 100%;
      }
    }

  }

  .grey_line {
    width: 100%;
    height: 3rpx;
    background-color: #C7C7C7;
  }
}
</style>
